<template>
  <div class="con-box">
    <!-- 导航 -->
    <div class="uc-nav">
      <div class="nav-box">
        <div :class="['nav-item', sts == 0 ? 'active' : '']" @click="changeTab(0)">
          <span class="text">{{$t('all')}}</span>
          <i class="line"></i>
        </div>
        <div :class="['nav-item', sts == 1 ? 'active' : '']" @click="changeTab(1)">
          <span class="text">{{$t('applyReturn.refundsOnly')}}</span>
          <i class="line"></i>
        </div>
        <div :class="['nav-item', sts == 2 ? 'active' : '']" @click="changeTab(2)">
          <span class="text">{{$t('applyReturn.returnsAndRefunds')}}</span>
          <i class="line"></i>
        </div>
      </div>
    </div>
    <!-- /导航 -->
    <!-- 搜索 -->
    <!-- <div class="uc-serach">
      <div class="left">
        <div class="select-item">
          <span class="tit">退款状态</span>
          <div class="select">
            <span class="s-item">进行中</span>
            <span class="s-item">待处理</span>
            <span class="s-item">已拒绝</span>
            <span class="s-item">已完成</span>
          </div>
        </div>
        <div class="select-item">
          <span class="tit">退款时间</span>
          <div class="select">
            <span class="s-item">最近七天</span>
            <span class="s-item">最近三个月</span>
            <span class="s-item">三个月以上</span>
          </div>
        </div>
      </div>
      <div class="right">
        <input type="text" class="input" placeholder="订单编号/退款编号/商品名称" />
        <a href="#" class="search">查询订单</a>
      </div>
    </div>-->
    <!-- /搜索 -->
    <!-- 订单列表 -->
    <div class="order-list">
      <div class="order-table">
        <table cellspacing="0" cellpadding="0" class="box">
          <tbody>
            <tr class="box-tit">
              <th>{{$t('applyReturn.productInformation')}}</th>
              <th width="127">{{$t('applyReturn.returnType')}}</th>
              <th width="127">{{$t('applyReturn.refundAmount')}}</th>
              <th width="147">{{$t('applyReturn.applicationTime')}}</th>
              <th width="127">{{$t('applyReturn.processingStatus')}}</th>
              <th width="127">{{$t('operation')}}</th>
            </tr>
          </tbody>
          <tbody v-for="item in page.records" :key="item.refundId">
            <tr class="box-space">
              <td colspan="6"></td>
            </tr>
            <tr class="box-hd">
              <td colspan="6">
                <div class="order-number">
                  {{$t('applyReturn.orderNumber')}}：
                  <span class="num">{{item.orderNumber}}</span>
                </div>
                <div class="return-number">
                  {{$t('applyReturn.refundNumber')}}：
                  <span class="num">{{item.refundSn}}</span>
                </div>
                <nuxt-link :to="'/shopIndex?sid='+item.shopId" class="shop">
                  <span class="shop-icon"></span>
                  {{item.shopName}}
                </nuxt-link>
                <a href="JavaScript:void(0);" @click="toChat(item.shopId,item.shopName)" class="btn-im"  style="float: left;"></a>
              </td>
            </tr>
            <tr class="box-tr" v-for="(refund,index) in item.orderItems" :key="index">
              <td>
                <div class="goods-info">
                  <div class="img">
                    <img :src="refund.pic" alt />
                  </div>
                  <div class="name-sku">
                    <span class="name">{{refund.prodName}}</span>
                    <span class="sku">{{refund.skuName}}</span>
                  </div>
                </div>
              </td>
              <td :rowspan="item.orderItems.length" v-if="index==0">
                <span class="return-type">{{['',$t('applyReturn.refundsOnly'),$t('applyReturn.returnsAndRefunds')][item.applyType]}}</span>
              </td>
              <td :rowspan="item.orderItems.length" v-if="index==0">
                <span v-if="item.refundAmount">￥{{(item.refundAmount).toFixed(2)}}</span>
                <span v-if="item.refundAmount && item.refundScore">+</span>
                <span v-if="item.refundScore">{{item.refundScore}}{{$t('applyReturn.points')}}</span>
              </td>
              <td :rowspan="item.orderItems.length" v-if="index==0">
                <div class="apply-time">{{item.applyTime}}</div>
              </td>
              <td :rowspan="item.orderItems.length" v-if="index==0">
                <div class="status">
                  <div
                    class="text no-finish"
                  >{{['',$t('applyReturn.buyerApplication'),$t('applyReturn.sellerAcceptance'),$t('applyReturn.buyerShipping'),$t('applyReturn.sellerReceipt'),$t('applyReturn.successfulRefund'),$t('applyReturn.buyerWithdrawsApplication'),$t('applyReturn.merchantRefusal'),$t('applyReturn.refundClose')][item.returnMoneySts]}}</div>
                  <div class="text no-finish" v-if="item.returnMoneySts == -1">{{$t('applyReturn.refundClose')}}</div>
                </div>
              </td>
              <td :rowspan="item.orderItems.length" v-if="index==0">
                <div class="action">
                  <nuxt-link
                    :to="{path:'/return-detail?refundSn=' + item.refundSn}"
                    class="action-btn default"
                  >{{$t('applyReturn.viewDetails')}}</nuxt-link>
                  <!-- <a
                    href="javascript:void(0);"
                    class="action-a"
                    @click="cancelApply(item.refundSn)"
                    v-if="item.returnMoneySts == 1 || item.returnMoneySts == 2 || item.returnMoneySts == 7"
                  >撤销申请</a>-->
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <!-- 空列表提示 -->
        <div class="empty" v-if="!page.records.length">
          <div class="img">
            <img src="~/assets/images/emptyPic/not-found.png" alt />
          </div>
          <div class="action">
            <div class="text">{{$t('applyReturn.noRelatedRecords')}}</div>
            <nuxt-link to="/" class="btn">{{$t('backToHome')}}</nuxt-link>
          </div>
        </div>
        <!-- /空列表提示 -->
      </div>
      <pagination v-model="page.current" :pages="page.pages" @changePage="getMyRefundOrder"></pagination>
    </div>
    <!-- /订单列表 -->
  </div>
</template>

<script>
// import PageUtil from '~/plugins/pageUtil'
import Pagination from '~/components/pagination'
export default {
  components: {
    Pagination
  },
  data () {
    return {
      page: {
        records: [],
        total: 0, // 总条
        pages: 0, // 总页数
        current: this.$route.query.current, // 当前页数
        size: 5, // 每页显示多少条
        // rainbow: [], // 分页条
      },
      sts: 0,//申请类型: 0/null 全部 1仅退款 2退款退货
    }
  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('applyReturn.refunds')
    if(localStorage.getItem('returnCurrent')!==null){
      this.page.current = JSON.parse(localStorage.getItem('returnCurrent'))
    }
    this.getMyRefundOrder()  //我的退款订单列表
  },
  methods: {

    /**
     * 跳转客服
     */
    toChat(shopId,shopName) {
      let routeUrl = this.$router.resolve({
        path: '/chat?shopId=' + shopId + (shopName==null?'&chatType=1':'')
      });
      window.open(routeUrl.href, 'view_window');
    },
    /**
     * 我的退款订单列表
     */
    getMyRefundOrder (current) {
      this.$axios.get('/p/orderRefund/list', {
        params: {
          current: current || this.page.current,
          size: 5,
          applyType: this.sts
        }
      }).then(({ data }) => {
        // data.rainbow = PageUtil.rainbowWithDot(data.current, data.pages, 5)
        this.page = data
        if(this.page.current!==undefined){
          localStorage.setItem('returnCurrent',JSON.stringify(this.page.current))
        }
      })
    },
    /**
     * 改变tab
     */
    changeTab (sts) {
      this.sts = sts  //0全部 1仅退款 2退货退款
      this.getMyRefundOrder()
    },

    /**
     * 撤销申请
     */
    cancelApply (refundSn) {
      this.$confirm(this.$i18n.t('applyReturn.refundReason11'), this.$i18n.t('applyReturn.tips'), {
        confirmButtonText: this.$i18n.t('determine'),
        cancelButtonText: this.$i18n.t('cancel'),
        type: 'warning'
      }).then(() => {
        this.$axios.put('/p/orderRefund/cancel', refundSn)
          .then(({ data }) => {
            this.$message({
              message: this.$i18n.t('applyReturn.refundReason12'),
              duration: 1000,
              type: 'success'
            });
            setTimeout(() => {
              // this.$router.push({ path: '/user-center/uc-return' })
              this.getMyRefundOrder()
            }, 1000)
          })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除',
        //   duration: 1000,
        // });
      });
    },

  },
}
</script>

<style scoped src='~/assets/css/uc-return.css'></style>
<style scoped src='~/assets/css/user-center.css'></style>
